<!DOCTYPE html>
<html>
<head>
	<title>TweenJS: Simple Tween Demo</title>

	<link rel="stylesheet" href="assets/demoStyles.css" />

	<script type="text/javascript" src="./assets/easeljs-NEXT.min.js"></script>

	<!-- Note: All core TweenJS classes are listed here: -->
	<script type="text/javascript" src="../src/createjs/events/Event.js"></script>
	<script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../src/tweenjs/Tween.js"></script>
	<script type="text/javascript" src="../src/tweenjs/Ease.js"></script>

	<script type="text/javascript" src="../src/tweenjs/MotionGuidePlugin.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script>
		var canvas;
		var stage;

		function init() {
			if (window.top != window) {
				document.getElementById("header").style.display = "none";
			}

			createjs.MotionGuidePlugin.install(createjs.Tween);

			canvas = document.getElementById("testCanvas");
			stage = new createjs.Stage(canvas);
			stage.autoClear = true;

			var ball;
			var count = 1000;

			while(count--){
				ball = new createjs.Shape();
				ball.graphics.ss(1,'round','round').s(('#000000')).f("#"+rc()+rc()+rc()).dc(0,0,5).ef().es();
				var path = [rx(),ry(),rx(),ry(),rx(),ry()];
				createjs.Tween.get(ball, {loop:true})
					.to({guide:{path:path, start:0, end:1}}, 5000)
					.wait(Math.random()*4000)
					.to({guide:{path:path, start:1, end:0}}, 5000);
				stage.addChild(ball);
			}

			createjs.Ticker.addEventListener("tick", stage);
		}

		function rx(){ return Math.random()*940+10; }
		function ry(){ return Math.random()*380+10; }
		function rc(){return Math.round(Math.random()*0xED+0x12).toString(16); }


	</script>
	<link rel="stylesheet" href="assets/demoStyles.css"/>
</head>
<body onload="init();" >

<div class="canvasHolder">

	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Tween<strong>JS</strong></span> Simple Tween Demo</h1>
	    <p>This example shows TweenJS in action.</p>
	</header>

	<canvas id="testCanvas" width="960" height="400"></canvas>

</div>

</body>
</html>
